{% extends "community/base.html" %}

{% block head %}
{% endblock %}

{% block body %}

<!--顶部导航栏-->
<div class="topblock">
<a href="{{ url_for('community.index')}}">
<img class="home" src="../static/layui/images/community/home.png"></a>
<div class="search">
     <form method="GET" action="{{ url_for('community.search') }}">
    <input type="text" placeholder="搜索您感兴趣的内容" class="layui-input" name="key">
      <div class="search_btn">
        <button class="layui-btn layui-btn-primary">搜索</button>
      </div>
     </form>
</div>
<div class="tabbar">
<ul class="layui-nav layui-bg-green" lay-bar="disabled">
        <li class="layui-nav-item"><a href="{{ url_for('community.category',post_type=1) }}" style="color: black;font-size: 16px">读者社区</a></li>
        <li class="layui-nav-item"><a href="{{ url_for('community.category',post_type=2) }}" style="color: black;font-size: 16px">图书专区</a></li>
        <li class="layui-nav-item"><a href="{{ url_for('community.category',post_type=4) }}" style="color: black;font-size: 16px">打听求助</a></li>
        <li class="layui-nav-item"><a href="{{ url_for('community.category',post_type=3) }}" style="color: black;font-size: 16px">资源分享</a></li>
</ul>
</div>
    <div class="topright">
     <img class="icon" src="../static/layui/images/community/account.png">
     <img class="icon" src="../static/layui/images/community/set.png">
     <img class="icon" src="../static/layui/images/community/help.png">
    <button type="button" class="layui-btn layui-btn-warm layui-btn-radius">发布</button>
    </div>
</div>

    <div class="mainbox">
<form class="layui-form layui-form-pane" action="#" method="post">

  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">标题</label>
    <div class="layui-input-block" id="title">
      <textarea name="title" placeholder="请输入标题" class="layui-textarea"></textarea>
    </div>
  </div>

  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">内容</label>
    <div class="layui-input-block" id="">
      <textarea name="content" placeholder="请输入内容" class="layui-textarea"></textarea>
    </div>
  </div>



 <div class="layui-upload-drag" style="display: block;" id="ID-upload-demo-drag">
    <i class="layui-icon layui-icon-upload"></i>
    <div>点击上传，或将文件拖拽到此处</div>
    <div class="layui-hide" id="ID-upload-demo-preview">
        <hr> <img src="" alt="上传成功后渲染" style="max-width: 120px; max-height: 120px;">
    </div>
    <input type="file" id="uploadInput" style="display: none;" accept="image/*">
</div>

  <div class="layui-form-item">
    <button class="layui-btn" lay-submit lay-filter="demo2">确认</button>
    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  </div>
</form>
    </div>

<script src="//unpkg.com/layui@2.9.9/dist/layui.js"></script>
<script>


layui.use(function(){
    var upload = layui.upload;
    var $ = layui.$;

    upload.render({
        elem: '#ID-upload-demo-drag',
        choose: function(obj){
            obj.preview(function(index, file, result){
                var imageUrl = file.name; // 获取文件的名称，即本地路径
                console.log("本地文件路径：", imageUrl);

                // 在预览区域展示所选图片
                $('#ID-upload-demo-preview').removeClass('layui-hide').find('img').attr('src', result);

                // 将本地文件路径（文件名）传递给表单的imageUrl属性中
                $('form').attr('imageUrl', imageUrl);
                console.log("imageUrl属性值：", $('form').attr('imageUrl'));
            });
        }
    });
});

</script>
{% endblock %}